import React, { useEffect, useState } from 'react';
import { Button, Divider } from 'antd';
import PureComponent from './PureComponent';
import ShouldComponentUpdateDemo from './ShouldComponentUpdateDemo';
import MemoDemo from './MemoDemo';
import styled from '@emotion/styled';

const YouHua = () => {
  const [flag, setFlag] = useState(false);
  return (
    <Container>
      <h3>性能优化</h3>
      <h4>
        第一条 组件卸载前进行清理操作 <br /> 在组件中为window 注册的全局事件，以及定时器，在组件卸载前要清理掉，防止组件卸载后继续执行影响性能
      </h4>
      {flag && <Test />}
      <Button onClick={() => setFlag(prev => !prev)}>点击</Button>
      <PureComponent />
      <ShouldComponentUpdateDemo />
      <Divider />
      <MemoDemo />
    </Container>
  );
};

const Test = () => {
  useEffect(() => {
    let timer = setInterval(() => {
      console.log('定时器在执行');
    }, 1000);
    return () => clearInterval(timer);
  }, []);
  return <div>77777777</div>;
};

const Container = styled.div`
  margin: 20px;

  & > h3 {
    color: green;
  }

  & > h4 {
    color: red;
  }
`;

export default YouHua;
